<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Chess, here we go!</title>
	<script>
		function changeStyle(_elementID)
		{
			var _newClass="withBorder black";
			if (document.getElementById(_elementID).className==_newClass)
			{
				_newClass="withBorder white";
			}
			document.getElementById(_elementID).className = _newClass;
		}
		
		function checkNameAvailable(_idPlayerName)
		{
			var name=document.getElementById(_idPlayerName).value;
			//window.open("http://3dividedby3.appspot.com/playchess?name="+name, "_self");
			window.open("http://localhost:8888/playchess?name="+name, "_self");
		}		
	</script>
	<style type="text/css">
		.withBorder {border-style:solid;border-width:1px;border-color:blue;}
		.black {background-color:black;color:white}
		.white {background-color:white;color:black}
	</style>
  </head>

  <body>
    <table cellspacing=0 style="vertical-align:middle;text-align:center;border-collapse:collapse;">
      <tr>
		<td></td>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td>
        <td>f</td>
        <td>g</td>
        <td>h</td>
      </tr>
	  <script>
	  	for (var j=1; j<9; j++)
		{
			document.write("<tr>");
			document.write("<td>"+(9-j)+"</td>");
			for (var i=1; i<9; i=i+2)
			{
				var _first, _second;
				if ((j-1)==0)
				{
					_first="withBorder white";
					_second="withBorder black";
				}
				else 
				{
					if ((j-1)%2==0)
					{
						_first="withBorder white";
						_second="withBorder black";
					}
					else
					{
						_first="withBorder black";
						_second="withBorder white";
					}
				}
				document.write("<td id=\"id"+j+""+i+"\" class=\""+_first+"\" onclick=\"changeStyle('id"+j+""+i+"');\">"+j+" "+i+"</td>");
				document.write("<td id=\"id"+j+(i+1)+"\" class=\""+_second+"\" onclick=\"changeStyle('id"+j+(i+1)+"');\">"+j+" "+(i+1)+"</td>");
			}
			document.write("</tr>");
		}
	  </script>
    </table>
    
    Player name: <input type="text" name="playerName" id="idPlayerName">
	<button type="button" onclick="checkNameAvailable('idPlayerName');">Choose a name!</button>
  </body>
</html>